<template>
    <el-dialog title="打印预览" :visible.sync="visible" width="700px" append-to-body :close-on-click-modal="false" :before-close="close" @close="onClose">
        <div class="print-content">
            <div class="print-body">
                <div>
                    <div class="print-table" ref="print">
                        <el-table :data="tableData" :show-header="false" border style="width: 100%">
                            <el-table-column prop="label" label="key">
                                <template slot-scope="scope">
                                    <div>
                                        <div>{{scope.row.label}}</div>
                                        <span v-if="scope.row.src"><img style="width:132.6px;height:139.1px" :src="scope.row.src" alt="" /></span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="value" label="value">
                                <template slot-scope="scope">
                                    <div>
                                        <span>{{scope.row.value}}</span>
                                        <div v-if="scope.row.src">
                                            <vue-qr :logoSrc="logo" text="https://www.baidu.com/" :size="180"></vue-qr>
                                        </div>
                                    </div>

                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer mb8 btnGroup">
            <el-button @click="close" icon="el-icon-close" size="small">取 消</el-button>
            <el-button type="default" @click="printDemo" v-print="'#printTest'" class="exportitemBtn" size="small"><img src="@/assets/images/icons/print.png" alt="" />{{ $t("inspectionManagement.printer") }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import pass from '@/assets/images/inspection-status/pass.png'
import unpass from '@/assets/images/inspection-status/unpass.png'
import testMaterial from '@/assets/images/inspection-status/testMaterial.png'
import selectUse from '@/assets/images/inspection-status/selectUse.png'

import accept from '@/assets/images/inspection-status/accept.png'
import { incomingInfo } from '@/api/inspectionManagement/inspectionManagement'
import logo from '@/assets/images/inspection-status/qrcode-logo.png'
import vueQr from 'vue-qr'
export default {
    name: 'TemplateDialog',
    components: { vueQr },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        previewModel: {
            type: Object,
            default: null,
        },
    },
    data() {
        return { logo: logo, tableData: [] }
    },
    watch: {
        previewModel(val) {
            this.$nextTick(() => {
                this.getIncomingInfo()
            })
        },
    },
    methods: {
        // 点击打印
        printDemo() {
            setTimeout(() => {
                this.$print(this.$refs.print)
            }, 100)
        },
        getIncomingInfo() {
            let viewModel = { ...this.previewModel }
            let tableData = [
                { label: '物料编号', value: viewModel.materialCode },
                { label: '供应商批次', value: viewModel.lichn },
                { label: '批次', value: viewModel.lot },
                { label: '质检结果', value: '' },
            ]

            if (viewModel.usingDecision === '2') {
                tableData[3].src = accept
            } else if (viewModel.usingDecision === '4') {
                tableData[3].src = testMaterial
            } else if (viewModel.usingDecision === '5') {
                tableData[3].src = selectUse
            } else {
                if (viewModel.decideResult == '1') {
                    tableData[3].src = pass
                }
                if (viewModel.decideResult == '0') {
                    tableData[3].src = unpass
                }
            }

            this.tableData = tableData
            // this.getFlowByMaterialCode(this.viewModel.materialCode)
            this.loading = false
        },
        // 窗口关闭
        onClose() {
            this.$emit('update:visible', false)
        },
        handleConfirm() {
            this.$emit('update:visible', false)
        },
        choose(scope) {
            console.log(scope.row.templateName)
            getItemsByTemplateName({
                templateName: scope.row.templateName,
            }).then((response) => {
                console.log(response)
                this.$emit('callback', response.data.itemList)
                this.$emit('update:visible', false)
            })
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible', false)
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
::v-deep .el-table tr .cell {
    line-height: 33px;
    font-size: 15px;
}
.print-content {
}
.print-body {
    width: 100%;
    height: 338px;
}
.print-table {
    width: 100%;
    height: 355px;
}
</style>
<style media="print">
@page {
    margin-bottom: 1mm;
}
</style>
